
<template>
    <div>
      <a-page-header
          style="border: 1px solid rgb(235, 237, 240)"
          title="记录查询"
          sub-title="公益探索功能"
          @back="() => { router.go(-1) }"
      >
        <template #extra>
          <a-form-item label="最近一次姨妈时间">
            <a-date-picker v-model:value="lastPeriodStartDate" />
          </a-form-item>
        </template>
      </a-page-header>
      <div ref="basePoint" class="menstrualCalendar" :style="`height: ${ windowHeight - elementToTopHight - 7 }px !important;`">
        <a-calendar v-model:value="value" style="height: 100%;">
          <template #dateCellRender="{ current }">
            <ul class="events">
              <li v-for="item in getListData(current)" :key="item.content">
                <a-badge :status="item.type" :text="item.content" />
              </li>
            </ul>
          </template>
        </a-calendar>
      </div>
    </div>
</template>

<script setup lang="ts">
      import { ref } from 'vue';
      import { Dayjs } from 'dayjs';
      import dayjs from "dayjs"
      const value = ref<Dayjs>();
      import DynamicHeight from "@/utils/DynamicHeight";
      const { basePoint , windowHeight , elementToTopHight } = DynamicHeight();
      import { useRouter } from "vue-router";

      const router = useRouter();

      interface Props {
        height?: number;
      }

      withDefaults(defineProps<Props>(),{
        height: () => 300
      });

      const lastPeriodStartDate = ref();
      const getListData = (value: Dayjs) => {
        const cycleLength = 28;
        const periodDuration = 7;
        const monthsToCalculate = 2;
        const cyclesInfo = calculateCyclesForMonths(lastPeriodStartDate.value, cycleLength, periodDuration, monthsToCalculate);
        let listData;
        let nowItemDate = new Date(dayjs(value).format('YYYY-MM-DD')).getTime();
        if (nowItemDate >= new Date(cyclesInfo[0].lastMenstrualPeriod.start).getTime() && nowItemDate <= new Date(cyclesInfo[0].lastMenstrualPeriod.end).getTime()) {
          listData = [
            {type: 'warning', content: '上次月经期'},
          ];
        }else if (nowItemDate >= new Date(cyclesInfo[0].nextMenstrualPeriod.start).getTime() && nowItemDate <= new Date(cyclesInfo[0].nextMenstrualPeriod.end).getTime()) {
          listData = [
            {type: 'error', content: '下次月经期'},
          ];
        }else if (nowItemDate >= new Date(cyclesInfo[1].nextMenstrualPeriod.start).getTime() && nowItemDate <= new Date(cyclesInfo[1].nextMenstrualPeriod.end).getTime()) {
          listData = [
            {type: 'error', content: '下次月经期'},
          ];
        }
        else if (nowItemDate >= new Date(cyclesInfo[0].safePeriodBefore.start).getTime() && nowItemDate <= new Date(cyclesInfo[0].safePeriodBefore.end).getTime()) {
          listData = [
            {type: 'success', content: '安全期'},
          ];
        }else if (nowItemDate >= new Date(cyclesInfo[1].safePeriodBefore.start).getTime() && nowItemDate <= new Date(cyclesInfo[1].safePeriodBefore.end).getTime()) {
          listData = [
            {type: 'success', content: '安全期'},
          ];
        }else if (nowItemDate >= new Date(cyclesInfo[0].safePeriodAfter.start).getTime() && nowItemDate <= new Date(cyclesInfo[0].safePeriodAfter.end).getTime()) {
          listData = [
            {type: 'success', content: '安全期'},
          ];
        }else if (nowItemDate >= new Date(cyclesInfo[1].safePeriodAfter.start).getTime() && nowItemDate <= new Date(cyclesInfo[1].safePeriodAfter.end).getTime()) {
          listData = [
            {type: 'success', content: '安全期'},
          ];
        }else if (nowItemDate >= new Date(cyclesInfo[1].ovulationPeriod.start).getTime() && nowItemDate <= new Date(cyclesInfo[1].ovulationPeriod.end).getTime()) {
          listData = [
            {type: 'processing', content: '排卵日'},
          ];
        }else if (nowItemDate >= new Date(cyclesInfo[0].ovulationPeriod.start).getTime() && nowItemDate <= new Date(cyclesInfo[0].ovulationPeriod.end).getTime()) {
          listData = [
            {type: 'processing', content: '排卵日'},
          ];
        }
        return listData || [];
      };


      function calculateCyclesForMonths(lastPeriodStartDateStr : string, cycleLength : number, periodDuration : number, monthsToCalculate : number) {
        const lastPeriodStartDate = new Date(lastPeriodStartDateStr);
        let cyclesInfo = [];

        for (let i = 0; i < monthsToCalculate; i++) {
          const thisCycleInfo = calculateCycle(lastPeriodStartDate, cycleLength, periodDuration);
          cyclesInfo.push({
            month: thisCycleInfo.month,
            lastMenstrualPeriod: {
              start: formatDate(new Date(thisCycleInfo.lastMenstrualPeriod.start)),
              end: formatDate(new Date(thisCycleInfo.lastMenstrualPeriod.end))
            },
            nextMenstrualPeriod: {
              start: formatDate(new Date(thisCycleInfo.nextMenstrualPeriod.start)),
              end: formatDate(new Date(thisCycleInfo.nextMenstrualPeriod.end))
            },
            ovulationPeriod: {
              start: formatDate(new Date(thisCycleInfo.ovulationPeriod.start)),
              end: formatDate(new Date(thisCycleInfo.ovulationPeriod.end))
            },
            safePeriodBefore: {
              start: formatDate(new Date(thisCycleInfo.safePeriodBefore.start)),
              end: formatDate(new Date(thisCycleInfo.safePeriodBefore.end))
            },
            safePeriodAfter: {
              start: formatDate(new Date(thisCycleInfo.safePeriodAfter.start)),
              end: formatDate(new Date(thisCycleInfo.safePeriodAfter.end))
            }
          });

          lastPeriodStartDate.setTime(thisCycleInfo.nextMenstrualPeriod.start);
        }

        return cyclesInfo;
      }

      function calculateCycle(lastPeriodStartDate : Date, cycleLength : number, periodDuration : number) {
        const lastPeriodEndDate = new Date(lastPeriodStartDate.getTime() + (periodDuration * 24 * 60 * 60 * 1000));
        const nextPeriodStartDate = new Date(lastPeriodStartDate.getTime() + (cycleLength * 24 * 60 * 60 * 1000));
        const nextPeriodEndDate = new Date(nextPeriodStartDate.getTime() + (periodDuration * 24 * 60 * 60 * 1000));
        const ovulationDay = new Date(nextPeriodStartDate.getTime() - (14 * 24 * 60 * 60 * 1000));
        const ovulationStartDate = new Date(ovulationDay.getTime() - (3 * 24 * 60 * 60 * 1000));
        const ovulationEndDate = new Date(ovulationDay.getTime() + (3 * 24 * 60 * 60 * 1000));
        const safePeriodBeforeStartDate = new Date(lastPeriodEndDate.getTime() + 1);
        const safePeriodBeforeEndDate = new Date(ovulationStartDate.getTime() - 1);
        const safePeriodAfterStartDate = new Date(ovulationEndDate.getTime() + 1);
        const safePeriodAfterEndDate = new Date(nextPeriodStartDate.getTime() - 1);

        const currentDate = new Date(lastPeriodStartDate);
        const month = currentDate.toLocaleString('default', { month: 'long' });

        return {
          month,
          lastMenstrualPeriod: { start: lastPeriodStartDate.getTime(), end: lastPeriodEndDate.getTime() },
          nextMenstrualPeriod: { start: nextPeriodStartDate.getTime(), end: nextPeriodEndDate.getTime() },
          ovulationPeriod: { start: ovulationStartDate.getTime(), end: ovulationEndDate.getTime() },
          safePeriodBefore: { start: safePeriodBeforeStartDate.getTime(), end: safePeriodBeforeEndDate.getTime() },
          safePeriodAfter: { start: safePeriodAfterStartDate.getTime(), end: safePeriodAfterEndDate.getTime() }
        };
      }

      function formatDate(date : Date) {
        const year = date.getFullYear();
        const month = String(date.getMonth() + 1).padStart(2, '0');
        const day = String(date.getDate()).padStart(2, '0');
        return `${year}-${month}-${day}`;
      }


</script>

<style scoped lang="scss">
      ::-webkit-scrollbar
      {
        width: 6px;
        height: 16px;
        background-color: #F5F5F5;
      }

      /*定义滚动条轨道 内阴影+圆角*/
      ::-webkit-scrollbar-track
      {
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
        border-radius: 6px;
        background-color: #F5F5F5;
      }

      /*定义滑块 内阴影+圆角*/
      ::-webkit-scrollbar-thumb
      {
        border-radius: 6px;
        -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
        background-color: #555;
      }
      .menstrualCalendar {
          overflow: scroll;
          padding: 0 22px;
          overflow-x: hidden;
      }
      :where(.css-dev-only-do-not-override-1hsjdkk).ant-picker-calendar.ant-picker-calendar-full .ant-picker-calendar-date-content {
        height: 56px;
      }

</style>
